<template>
	<view class="warp">
		<view class="coin-order-item" v-if="orderItemList.length > 0" v-for="(item,index) in orderItemList" :key="index">
			<view class="u-flex u-row-between">
				<view>订单状态：
					<text class="treat" v-if="orderStatusEnum.WAIT == item.status">待支付</text>
					<text class="success" v-else-if="orderStatusEnum.SUCCESS == item.status">支付成功</text>
					<text class="payment-successful" v-else-if="orderStatusEnum.PART_REFUND == item.status">部分退款成功</text>
					<text style="color: #6072FF;" v-else-if="orderStatusEnum.FULL_FERUND == item.status">退款成功</text>
					<text style="color: #7c54ff;" v-else-if="orderStatusEnum.REFUNDING == item.status">退款中</text>
					<text class="fail" v-else-if="orderStatusEnum.REFUND_FAIL == item.status">退款失败</text>
				</view>
				<view class="price u-flex-center">
					<image v-if="channelTypeEnum.WX == item.channelType" class="image-32"
						:src="`${staticFileUrl}/image/order/wechat.png`"></image>
					<image v-else-if="channelTypeEnum.ALI == item.channelType" class="image-32"
						:src="`${staticFileUrl}/image/order/payTreasure.png`"></image>
					<image
						v-else-if="channelTypeEnum.BANKNOTE_MACHINE == item.channelType || channelTypeEnum.COIN_BOX == item.channelType"
						class="image-32" :src="`${staticFileUrl}/image/order/cash.png`"></image>
					<view class="u-m-l-10">{{item.totalPrice}}元</view>
				</view>
			</view>
			<view>出货状态：
				<text v-if="item.shipmentStatus == orderShipmentStatusEnum.READY_FOR_SHIPMENT" class="treat">待出货</text>
				<text v-else-if="item.shipmentStatus == orderShipmentStatusEnum.SUCCESS" class="success">出货成功</text>
				<text v-else-if="item.shipmentStatus == orderShipmentStatusEnum.FAILURE" class="fail">出货失败</text>
				<text v-else-if="item.shipmentStatus == orderShipmentStatusEnum.PARTIAL_FAILURE" class="fail u-p-l-10">{{item.shipmentFailureNum}}个出货失败</text>
			</view>
			<view>出礼货道：<text>第{{item.hierarchy}}层，第{{item.freightLane}}货道</text></view>
			<view>商品名称：<text>{{item.name}}</text></view>
			<view>商品数量：<text>{{item.num}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				orderId:'',
				orderItemList:[],
				orderStatusEnum: this.$orderStatusEnum,
				orderShipmentStatusEnum: this.$orderShipmentStatusEnum,
				channelTypeEnum: this.$channelTypeEnum,
				staticFileUrl: this.$configPath.staticFileUrl,
			}	
		},
		onLoad(options) {
			// console.log(options)
			if(options){
				this.orderId = options.orderId
			}
			this.findOrderItemByOrderIdList();
		},
		methods:{
			findOrderItemByOrderIdList(){
				if (this.$u.test.isEmpty(this.orderId)) {
					getApp().err("订单号飞到太空去啦");
					return
				}
				
				let body = {
					orderId: this.orderId
				}
				this.$api('orderItem.findOrderItemByOrderIdList', body).then(res => {
					if (res.status == 0) {
						this.orderItemList = res.data;
					} else {
						getApp().err(res.msg);
					}
				
				})
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		padding-bottom: 80rpx;
		.coin-order-item{
			margin: 30rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			line-height: 34rpx;
			margin-bottom: 20rpx;
			line-height: 50rpx;
			font-size: 28rpx;
		}
		.treat{
			color: rgb(255, 121, 5);
		}
		.success{
			color: #00bb9c;
		}
		.fail{
			color: #FF0000;
		}
		.price{
			color: #000000;
			font-size: 38rpx;
		}
		.image-32 {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>